<template>
  <div class="container">
    <h1>娱乐场所管理</h1>
    
    <!-- 搜索和筛选区域 -->
    <div class="search-panel">
      <input
        type="text"
        v-model="searchQuery"
        @input="filterVenues"
        placeholder="搜索店铺名称..."
      />

      <div class="filters">
        <div class="filter-item">
          <label>所属派出所:</label>
          <select v-model="selectedPoliceStation" @change="filterVenues">
            <option value="">全部</option>
            <option v-for="station in policeStations" :key="station">{{ station }}</option>
          </select>
        </div>

        <div class="filter-item">
          <label>场所类型:</label>
          <select v-model="selectedType" @change="filterVenues">
            <option value="">全部</option>
            <option v-for="type in venueTypes" :key="type">{{ type }}</option>
          </select>
        </div>
      </div>

      <button class="add-btn" @click="showAddDialog = true">新增场所</button>
    </div>

    <!-- 数据表格 -->
    <div class="venue-table">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>类型</th>
            <th>状态</th>
            <th>派出所</th>
            <th>地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="venue in paginatedVenues" :key="venue.id">
            <td>{{ venue.id }}</td>
            <td>{{ venue.name }}</td>
            <td>{{ venue.type }}</td>
            <td>{{ venue.status }}</td>
            <td>{{ venue.policeStation }}</td>
            <td>{{ venue.address }}</td>
            <td>
              <button @click="editVenue(venue)">编辑</button>
              <button @click="deleteVenue(venue.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 分页控件 -->
      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
        <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <div class="dialog" v-if="showAddDialog || showEditDialog">
      <div class="dialog-content">
        <h2>{{ isEditing ? '编辑场所' : '新增场所' }}</h2>
        
        <div class="form-group">
          <label>名称:</label>
          <input v-model="currentVenue.name" />
        </div>
        
        <div class="form-group">
          <label>类型:</label>
          <select v-model="currentVenue.type">
            <option v-for="type in venueTypes" :key="type" :value="type">{{ type }}</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>状态:</label>
          <select v-model="currentVenue.status">
            <option value="营业中">营业中</option>
            <option value="暂停营业">暂停营业</option>
            <option value="已关闭">已关闭</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>派出所:</label>
          <select v-model="currentVenue.policeStation">
            <option v-for="station in policeStations" :key="station" :value="station">{{ station }}</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>位置类型:</label>
          <input v-model="currentVenue.locationType" />
        </div>
        
        <div class="form-group">
          <label>地址:</label>
          <input v-model="currentVenue.address" />
        </div>
        
        <div class="form-group">
          <label>经度:</label>
          <input v-model="currentVenue.longitude" type="number" step="0.00001" />
        </div>
        
        <div class="form-group">
          <label>纬度:</label>
          <input v-model="currentVenue.latitude" type="number" step="0.00001" />
        </div>
        
        <div class="dialog-actions">
          <button @click="saveVenue">保存</button>
          <button @click="closeDialog">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import venuesData from '../data/venues.json'

// 数据
const venues = ref([...venuesData])
const filteredVenues = ref([...venuesData])
const searchQuery = ref('')
const selectedPoliceStation = ref('')
const selectedType = ref('')
const policeStations = ['崇贤', '南苑', '东湖', '乔司', '塘栖','星桥','运河']
const venueTypes = ['KTV', '足浴', '女仆店','台球','私人影院','剧本杀店（桌游店）']

// 分页
const itemsPerPage = 10
const currentPage = ref(1)

// 对话框控制
const showAddDialog = ref(false)
const showEditDialog = ref(false)
const isEditing = ref(false)
const currentVenue = ref({
  id: null,
  name: '',
  status: '营业中',
  type: '',
  policeStation: '',
  locationType: '',
  address: '',
  longitude: 0,
  latitude: 0
})

// 计算属性
const paginatedVenues = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filteredVenues.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredVenues.value.length / itemsPerPage)
})

// 方法
const filterVenues = () => {
  let result = [...venues.value]

  // 按搜索关键词筛选
  if (searchQuery.value) {
    result = result.filter(venue => 
      venue.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  // 按派出所筛选
  if (selectedPoliceStation.value) {
    result = result.filter(venue => 
      venue.policeStation === selectedPoliceStation.value
    )
  }

  // 按场所类型筛选
  if (selectedType.value) {
    result = result.filter(venue => 
      venue.type === selectedType.value
    )
  }

  filteredVenues.value = result
  currentPage.value = 1 // 重置到第一页
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

const addVenue = () => {
  currentVenue.value = {
    id: Math.max(...venues.value.map(v => v.id)) + 1,
    name: '',
    status: '营业中',
    type: '',
    policeStation: '',
    locationType: '',
    address: '',
    longitude: 0,
    latitude: 0
  }
  isEditing.value = false
  showAddDialog.value = true
}

const editVenue = (venue) => {
  currentVenue.value = { ...venue }
  isEditing.value = true
  showEditDialog.value = true
}

const deleteVenue = (id) => {
  if (confirm('确定要删除这个场所吗？')) {
    venues.value = venues.value.filter(v => v.id !== id)
    filterVenues()
    // TODO: 保存到JSON文件
  }
}

const saveVenue = () => {
  if (isEditing.value) {
    // 更新现有场所
    const index = venues.value.findIndex(v => v.id === currentVenue.value.id)
    if (index !== -1) {
      venues.value[index] = { ...currentVenue.value }
    }
  } else {
    // 添加新场所
    venues.value.push({ ...currentVenue.value })
  }
  
  filterVenues()
  closeDialog()
  // TODO: 保存到JSON文件
}

const closeDialog = () => {
  showAddDialog.value = false
  showEditDialog.value = false
}

// 初始化
onMounted(() => {
  filterVenues()
})
</script>

<style scoped>
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-panel {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.search-panel input {
  width: 100%;
  padding: 10px;
  margin: 10px 0 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.filter-item select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-btn {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
}

.venue-table {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f5f5f5;
}

button {
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 15px;
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.dialog-actions button {
  padding: 8px 15px;
}
</style>